/* container */
:host,
.ui5-shellbar-search-field-wrapper {
	height: 2.25rem;
	display: flex;
	align-items: center;
}

:host(:not([collapsed])),
.ui5-shellbar-search-field-wrapper {
	min-width: 18rem;
	max-width: 36rem;
	margin: 0;
	height: 2.25rem;
	color: var(--sapShell_TextColor);
	font-size: var(--sapFontSize);
	font-family: var(--sapFontFamily);
	font-style: normal;
	box-shadow: var(--sapField_Shadow);
	border-radius: var(--_ui5_search_input_border_radius);
	box-sizing: border-box;
	text-align: start;
	background: var(--sapField_BackgroundStyle);
	background-color: var(--_ui5-search-wrapper-background);
	position: relative;
}

.ui5-shellbar-search-field-wrapper {
	flex: 1;
	min-width: auto;
}

:host(:not([collapsed]):hover),
:host(:not([collapsed]):focus-within),
.ui5-shellbar-search-field-wrapper:focus-within {
	box-shadow: var(--sapField_Hover_Shadow);
	background: var(--_ui5-search-wrapper-hover-background);
	background-color: var(--_ui5-search-wrapper-hover-background-color);
}

:host([focused-inner-input]) .ui5-search-field-root {
	outline: var(--_ui5_search_wrapper_outline);
	border-radius: var(--_ui5_search_input_border_radius);
	outline-offset: -0.125rem;
}

.ui5-search-field-root {
	width: 100%;
	height: 100%;
	position: relative;
	background: transparent;
	display: inline-block;
	outline: none;
	box-sizing: border-box;
	color: inherit;
	transition: border-color .2s ease-in-out;
	border-radius: var(--_ui5_search_input_border_radius);
	overflow: hidden;
}

.ui5-search-field-content {
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	overflow: hidden;
}

/* scope select */
[ui5-select] {
	--_ui5_content_density: compact;
	outline: none;
	margin: var(--_ui5_search_input_scope_margin);
	max-width: 10rem;
	border-radius: var(--_ui5_search_input_border_radius);
	border: var(--_ui5-search-border);
	box-shadow: none;
	background: unset;
	background-color: var(--_ui5-search-elements-background);
	height: var(--_ui5-search-select-height);
	--_ui5_select_label_color: var(--sapShell_TextColor);
}

[ui5-select]:hover {
	box-shadow: var(--sapField_Hover_Shadow);
}

[ui5-select]::part(icon) {
	display: flex;
	justify-content: center;
	align-items: stretch;
	height: 100%;
	padding: 0 0.5rem;
	align-self: center;
	border-radius: var(--_ui5_search_input_border_radius);
	color: var(--sapShell_InteractiveTextColor);
}

[ui5-select]::part(popover) {
	background-color: var(--sapShellColor);
}

.ui5-filter-wrapper {
	--_ui5_button_focused_border_radius: var(--_ui5_search_filter_button_border_radius);
}

/*filter button slot */
::slotted([slot="filterButton"]) {
	min-width: var(--_ui5_search_icon_size);
	height: var(--_ui5_search_icon_size);
	border: var(--_ui5_search_filter_button_border);
	border-radius: var(--_ui5_search_filter_button_border_radius);
	color: var(--sapShell_InteractiveTextColor);
	outline: none;
	background: var(--_ui5-search-filter_button_background_color);
	box-sizing: border-box;
	margin-inline-end: 0.1875rem;
	margin-inline-start: 0.25rem;
}

::slotted([slot="filterButton"]:focus-within) {
	background-color: var(--ui5_search_filter_button_background_active);
	border: var(--_ui5_search_filter_button_border);
}

::slotted([slot="filterButton"]:hover) {
	background-color: var(--sapShell_Hover_Background);
	border: var(--_ui5_seach_filter_button_border_hover);
}

/* input */
.ui5-search-field-inner-input {
	font-size: var(--sapFontSize);
	font-family: var(--sapFontFamily);
	font-style: normal;
	padding: 0.5rem 0;
	height: 100%;
	width: 100%;
    box-sizing: border-box;
	background-color: var(--_ui5-search-elements-background);
	border: var(--_ui5-search-border);
	outline: none;
	color: inherit;
	padding-inline-start: var(--_ui5-search-input-start-padding);
	padding-inline-end: var(--_ui5_search_input_end_padding);
}

:host([focused-inner-input]) .ui5-search-field-inner-input {
	outline: var(--_ui5_search_input_outline);
	border-radius: var(--_ui5_search_input_border_radius);
	outline-offset: -0.3125rem;
}

:host(:not([mode="Scoped"])) .ui5-search-field-inner-input {
	padding-inline-start: 0.875rem;
}

[ui5-select]:hover,
.ui5-search-field-inner-input:hover {
	background-color: var(--_ui5-search-elements-hover-background);
}

[ui5-select]:focus-within,
.ui5-search-field-inner-input:focus-within {
	background-color: var(--_ui5-search-elements-active-background);
}

.ui5-search-field-inner-input::placeholder {
	font-weight: normal;
	font-style: italic;
	color: var(--sapField_PlaceholderTextColor);
	padding-inline-start: 0.125rem;
}

:host([mode="Scoped"]) .ui5-search-field-inner-input {
	margin-inline-start: var(--_ui5_search_input_start_margin);
}

/* separator */
.ui5-search-field-separator {
	height: 1.5rem;
	width: 0.0625rem;
	background: var(--_ui5_search_separator_background);
	box-sizing: border-box;
	/* margin-inline-end: 0.5rem; */
}

/* buttons */
.ui5-shell-search-field-button {
	outline: none;
	min-width: var(--_ui5_search_icon_size);
	height: var(--_ui5_search_icon_size);
	border-radius: var(--_ui5_search_icon_border_radius);
	box-sizing: border-box;
	cursor: pointer;
}

.ui5-shell-search-field-button:not([design="Emphasized"]) {
	color: var(--sapShell_InteractiveTextColor);
	background-color: var(--_ui5-search-elements-background);
	min-width: var(--_ui5_search_icon_size_default);
	height: var(--_ui5_search_icon_size_default);
	border-radius: var(--_ui5_shellbar_button_border_radius);
}

.ui5-shell-search-field-button:not([design="Emphasized"]):hover {
	background-color: var(--sapShell_Hover_Background);
	border-color: var(--sapButton_Lite_Hover_BorderColor);
	border-radius: var(--_ui5_shellbar_button_border_radius);
}

/* copy paste all button styles - could be simplified */
.ui5-shell-search-field-button[desktop]:not([active])::part(button):after,
.ui5-shell-search-field-button:not([active])::part(button):focus-visible:after,
.ui5-shell-search-field-button[desktop][active][design="Emphasized"]::part(button):focus-within:after,
.ui5-shell-search-field-button[active][design="Emphasized"]::part(button):focus-visible:after,
.ui5-shell-search-field-button[desktop][active]::part(button):focus-within:before,
.ui5-shell-search-field-button[active]::part(button):focus-visible:before,
.ui5-shell-search-field-button[design="Emphasized"][desktop]::part(button):focus-within:before,
.ui5-shell-search-field-button[design="Emphasized"]::part(button):focus-visible:before {
	border-radius: var(--_ui5_shellbar_button_border_radius);
}


/* buttons */
.ui5-shell-search-field-icon {
	display: flex;
	justify-content: center;
	align-items: stretch;
	cursor: pointer;
	outline: none;
	min-width: var(--_ui5_search_icon_size);
	height: var(--_ui5_search_icon_size);
	border-radius: var(--_ui5_search_icon_border_radius);
	margin-inline-end: 0.25rem;
	margin-inline-start: 0.1875rem;
	box-sizing: border-box;
	color: var(--sapShell_InteractiveTextColor);
	background-color: var(--_ui5-search-elements-background);
	border: var(--_ui5-search-icon-border);
}
.ui5-shell-search-field-icon::part(root) {
	padding: var(--_ui5_search_icon_padding);
	width: 1rem;
	height: 1rem;
	outline-offset: -0.125rem;
}

.ui5-shell-search-field-icon:hover::part(root) {
	padding: var(--_ui5_search_icon_hover_padding); /*regular in hcb*/
	outline-offset: -0.1875rem;
}
.ui5-shell-search-field-icon:focus::part(root) {
	border-radius: var(--_ui5_search_icon_border_radius);
}
.ui5-shell-search-field-icon:hover,
.ui5-shell-search-field-input-button:hover {
	background: var(--sapShell_Hover_Background);
	border: 1px solid var(--sapButton_Lite_Hover_BorderColor);
	color: var(--sapShell_InteractiveTextColor);
}

.ui5-shell-search-field-search-icon {
	background-color: var(--sapButton_Emphasized_Background);
	border-color: var(--sapButton_Emphasized_BorderColor);
	color: var(--sapButton_Emphasized_TextColor);
}

.ui5-search-field-select {
	--_ui5_input_focus_border_radius: var(--_ui5_search_input_border_radius);
}

.ui5-search-field-select:hover,
.ui5-search-field-select[focused] {
	background: var(--_ui5-search-wrapper-hover-background-color);
}

.ui5-search-field-select::part(icon-wrapper) {
	border-radius: var(--_ui5_search_input_border_radius);
	height: 100%;
}

.ui5-search-field-select[focused]::part(icon-wrapper) {
	box-shadow: var(--sapField_Hover_Shadow);
}

:host(:not([collapsed]):hover):has([ui5-select]:hover) {
	background: var(--_ui5-search-wrapper-background);
}

:host(:not([collapsed])):has([ui5-select][focused]) {
	background: var(--_ui5-search-wrapper-background);
}

.ui5-search-field-inner-input::selection {
	background: var(--sapSelectedColor);
	color: var(--sapContent_ContrastTextColor);
}